<style>
  .container {
      width: 100%; /* 使用页面宽度作为容器宽度 */
      height: 150px; /* 设置容器的高度 */
      overflow-x: auto; /* 显示横向滚动条 */
      white-space: nowrap; /* 防止换行 */
  }

  .inner-container {
      display: flex;
      flex-direction: row;
  }

  .box {
      width: 200px; /* 增加子元素的宽度 */
      height: 100px;
      margin: 10px;
      background-color: lightblue;
  }

  .sticky-box {
    position: sticky;
    left: 0;
}
</style>

<div class="container">
  <div class="inner-container">
      <div class="box sticky-box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <!-- 增加更多的子元素 -->
  </div>
</div>